<template>
  <div class="login zoomInDown">
    <div class="wrapper">
      <div class="container">
        <div class="login-form">
          <h3>
            <span class="checked">账号注册</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入帐号" v-model="username" />
          </div>
          <div class="input">
            <input class="pasone" type="password" placeholder="请输入密码" v-model="password" />
          </div>
          <div class="input">
            <input class="pastwo" type="password" placeholder="确认密码" v-model="password1" />
          </div>
          <div class="input">
            <input type="text" placeholder="请输入常用邮箱地址" v-model="email" />
          </div>
          <div class="btn-box">
            <el-button :plain="true" @click="register" class="btn">确 定</el-button>
            <el-button :plain="true" @click="reset" class="btn2">重置</el-button>
          </div>
          <div class="msg">{{msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { mapActions } from "vuex";

import { api } from "./api/index";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      password1: "",
      userId: "",
      email: "",
      msg: "",
      mess: ""
    };
  },
  methods: {
    register() {
      console.log("ffff");
      const vm = this;
      let { username, password, email } = this;
      if (this.password === this.password1) {
        this.axios
          .post("/loc/register", {
            username,
            password,
            email
          })
          .then(res => {
            console.log(res.data.msg);
            if (res.data.msg === "注册成功" && res.data.status === 1000) {
              console.log("11");
              this.mess = res.data.msg;
              // this.$router.push("/login");
              this.$router.push({
                name: "login"
                // params: {
                //   da: JSON.stringify(result)
                // }
              });
              this.$message({
                duration: 3, // 时间
                showClose: true,
                message: "注册成功",
                offset: 200
              });
            } else {
              console.log("else");
              this.msg = res.data.msg;
            }
          });
      } else {
        this.msg = "两次密码输入不一致，请重新输入";
      }
    },

    reset() {
      this.username = "";
      this.password = "";
      this.email = "";
      this.password1 = "";
    },

    open() {
      const vm = this;
      this.$message({
        duration: 0, // 时间
        showClose: true,
        message: "注册成功",
        onClose() {
          vm.$router.push("/login");
        }
      });
    }
  }
};
</script>
<style lang="scss">
@keyframes myfirst {
  from {
    background: red;
  }
  to {
    background: yellow;
  }
}

.nnnnn {
  animation: myfirst 5s;
}

.btn {
  background: #ccc;
  margin-left: 50px;
  margin-right: 70px;
}
.btn2 {
  background: #ccc;
}
.login {
  height: 100%;
  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("./../imgs/login2.png") center no-repeat;
    background-size: cover;
    min-width: 1366px;
    min-height: 768px;
    .container {
      height: 576px;
      .login-form {
        box-sizing: border-box;
        padding-left: 31px;
        padding-right: 31px;
        width: 410px;
        height: 510px;
        background-color: #ffffff;
        position: absolute;
        bottom: 250px;
        right: 150px;
      }
    }
    h3 {
      line-height: 23px;
      font-size: 24px;
      text-align: center;
      margin: 40px auto 49px;
      .checked {
        color: #ff6600;
      }
      .sep-line {
        margin: 0 32px;
      }
    }
    .input {
      display: inline-block;
      width: 348px;
      height: 50px;
      border: 1px solid #e5e5e5;
      margin-bottom: 20px;
      line-height: 35px;
      input {
        font-size: 16px;
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border: none;
        padding: 10px;
        line-height: 50px;
        outline: none;
        margin-top: auto auto;
      }
    }
    .btn-box {
      .btn1 {
        color: #ffffff;
        display: inline-block;
        width: 80px;
        line-height: 50px;
        margin-top: 10px;
        font-size: 16px;
        // background-color:#FF6600;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin-left: 20%;
        border: none;
        a {
          color: #ffffff;
          display: inline-block;
          width: 80px;
          line-height: 50px;
          text-align: center;
          background-color: #ff6600;
        }
      }
    }
    .msg {
      width: 100%;
      height: 50px;
      color: yellowgreen;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      // font-weight: bold;
    }

    .tips {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      cursor: pointer;
      .sms {
        color: #ff6600;
      }
      .reg {
        color: #999999;
        span {
          margin: 0 7px;
        }
      }
    }
  }
}
</style>





